<template>
	<view class="test">
		<view class="page-wrapper">
				<HeaderSection 
			:loading="loading" 
			:userinfo="userinfo" 
			:opcData="opcData"
			@show-opc-selector="showOpcSelector"
			@go-to-login="goToLogin"
		/>
			<!-- <w-search></w-search> -->
			<view class="index-box1">
				<view class="nav-actual">
					<view class="nav-actual-list" v-for="(item, index) in subject_list" :key="index">
						<text :data-current='item.i' @click="subjectClick($event, item.i)">{{ item.text }}</text>
					</view>
					<view class="iconfont icon-xiangshang arrow"
						:style="{ 'left': subject_list[subject_nav_index].position }">
					</view>
				</view>
				<swiper class="swiper-box" @change="subjectSwiperChange" :current="subject_nav_index"
					v-if="data.chapters.length > 0">
					<swiper-item v-for="(_, index) in subject_list" :key="index">
						<scroll-view scroll-y class="subject-scroll" @scroll="onScroll">
							<view class="subject1">
								<!-- <view class="nav-list">
								<view class="list-box">
									<view class="list-box-link" @click="navigateTo('/pages/practicalTest/subjectDetail')">
										<view class="list-icon"
											style="background: linear-gradient(152deg, #63D2A0, #66D39C);box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(99,210,160,0.4);">
											<image style="width: 52rpx;height: 52rpx;" src="https://img.qiananquang.com/minapp/icon12.png" mode="">
											</image>
										</view>
										<text>考试标准</text>
									</view>
								</view>
								<view class="list-box">
									<view class="list-box-link" @click="navigateTo('/pages/practicalTest/subjectDetail')">
										<view class="list-icon"
											style="background: linear-gradient(0deg, #FB5051, #FB6969);box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(251,82,83,0.4);">
											<image style="width: 52rpx;height: 52rpx;" src="https://img.qiananquang.com/minapp/icon13.png" mode="">
											</image>
										</view>
										<text>考试流程</text>
									</view>
								</view>
								<view class="list-box">
									<view class="list-box-link" @click="navigateTo('/pages/practicalTest/subjectDetail')">
										<view class="list-icon"
											style="background: linear-gradient(0deg, #03AAF7, #04C6FB);box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(3,171,245,0.4);">
											<image style="width: 52rpx;height: 52rpx;" src="https://img.qiananquang.com/minapp/icon14.png" mode="">
											</image>
										</view>
										<text>考试标准</text>
									</view>
								</view>
							</view> -->

								<view class="subject-list">
									<view class="subject-list-item"
										v-for="(item, index) in data.chapters[subject_nav_index]?.chapterItems"
										:key="index">
										<view class="subject-list-img">
											<image :src="item.pic" mode="aspectFill"></image>
										</view>
										<view class="subject-list-content">
											<text class="subject-title">{{ item.title }}</text>
											<view class="subject-list-actions-img">
												<button size="mini" type="primary"
													v-if="opcData.opc == '030102' && subject_nav_index == 1 && item.title != 'K2-6导线连接'"
													@click.stop="onSimulateWiring(item, index)"
													class="action-btn primary">模拟接线</button>
												<button size="mini" 
													@click.stop="onStudyMaterial(subject_nav_index, item)"
													class="action-btn default">实操资料</button>
											</view>
										</view>
									</view>
								</view>
								<template v-if="opcData.opc == '030201' && subject_nav_index == 0 && data.chapters">
									<view class="subject3-box">
										<view class="subject3-box-left" style="background-color: #e1e9fb;"
											@click="navigateTo(`/pages/question/subject1?type=0&opcname=${opcData.opcname}&opc=${opcData.opc}`)">
											<view class="subject3-box-item">
												<text class="subject3-box-item-title">练习穿戴</text>
												<text class="subject3-box-item-num">模拟穿戴</text>
											</view>
											<button style="background-color:#485ea1;">立即练习</button>
										</view>
										<view class="subject3-box-right" style="background-color: #fce4dc;"
											@click="navigateTo(`/pages/question/subject1?type=1&opcname=${opcData.opcname}&opc=${opcData.opc}`)">
											<view class="subject3-box-item">
												<text class="subject3-box-item-title">模拟考试</text>
												<text class="subject3-box-item-num">考前模拟</text>
											</view>
											<button style="background-color: #a15f45;">立即模拟</button>
										</view>
									</view>
									<view style="margin: 30rpx;"
										@click="navigateTo(`/pages/question/paperList?type=2&opcname=${opcData.opcname}&opc=${opcData.opc}`)"
										class="btn-red exam-btn">
										<view class="exam-btn-txt">
											<text class="title">科目一模拟记录</text>
											<text class="look">去查看你所有的考试记录</text>
										</view>
										<view class="exam-btn-btn">去查看</view>
									</view>
								</template>

								<template v-if="data.chapters[subject_nav_index]?.mode == 1 && subject_nav_index == 2">
									<view class="subject3-box">
										<view class="subject3-box-left" style="background-color: #e1e9fb;"
											@click="subjectClick3(0)">
											<view class="subject3-box-item">
												<text class="subject3-box-item-title">顺序练习</text>
												<text class="subject3-box-item-num">共有{{ data.chapters[subject_nav_index].total }}题</text>
											</view>
											<button style="background-color:#485ea1;">立即练习</button>
										</view>
										<view class="subject3-box-right" style="background-color: #fce4dc;"
											@click="subjectClick3(1)">
											<view class="subject3-box-item">
												<text class="subject3-box-item-title">模拟考试</text>
												<text class="subject3-box-item-num">考前模拟</text>
											</view>
											<button style="background-color: #a15f45;">立即模拟</button>
										</view>
									</view>
									<view style="margin: 30rpx;"
										@click="navigateTo(`/pages/question/paperList?type=1&opcname=${opcData.opcname}&opc=${opcData.opc}`)"
										class="btn-red exam-btn">
										<view class="exam-btn-txt">
											<text class="title">科目三考试记录</text>
											<text class="look">去查看你所有的考试记录</text>
										</view>
										<view class="exam-btn-btn">去查看</view>
									</view>
									<!-- <view class="my">
									<view class="my-item">
										<view class="my-item-txt"
											@click="navigateTo(`/pages/question/questionList?opc=${opcData.opc}&type=2`)">
											<text class="title">我的错题</text>
											<text class="num">提高分数必看</text>
										</view>
										<view class="iconfont icon-cuowu2"></view>
									</view>
									<view class="my-item">
										<view class="my-item-txt"
											@click="navigateTo(`/pages/question/questionList?opc=${opcData.opc}&type=3`)">
											<text class="title">我的收藏</text>
											<text class="num">1题</text>
										</view>
										<view class="iconfont icon-shoucang"></view>
									</view>
								</view> -->
								</template>

							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
				<view v-else class="empty-state">
					<view class="empty-content">
						<up-empty mode="car" icon="/static/notData.png" text="请先登录后，在进行练习"></up-empty>
						<up-button :custom-style="{
							width: '300rpx',
							height: '80rpx',
							borderRadius: '8rpx',
							background: '#FD3523',
							border: 'none',
							marginTop: '30rpx'
						}" type="primary" @click="addCourse">请登录后，在进行练习</up-button>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="no-data">
			<uv-empty mode="car" icon="/static/notData.png" text="购买课程，后才能学习实操项目"></uv-empty>
			<button class="btn" @click="addCourse">购买课程</button>
		</view> -->

	</view>
</template>

<script>
import {
	getCourseDetail
} from '@/http/exam.js'
import { getDetail } from '@/http/user.js'
import guideStep from "@/components/xky-guideStep/xky-guideStep.vue";
import HeaderSection from "@/components/header-section/header-section.vue";

export default {
	components: {
		guideStep,
		HeaderSection
	},
	data() {
		return {
			loading: false, // 添加loading状态
			data: {
				chapters: []
			},
			step: {
				name: 'index-guide',
				repeat: true,
				guideList: [
					{
						el: '.content1',
						tips: '工种类别切换',
						style: "border-radius: 8rpx;margin: 0",
						next: "完成"
					}
				]
			},
			opcData: {
				opc: '',
				opcname: ''
			},
			subject_list: [{
				text: '科目一',
				i: 0,
				position: '12.5%'
			}, {
				text: '科目二',
				i: 1,
				position: '37.5%'
			}, {
				text: '科目三',
				i: 2,
				position: '62.5%'
			}, {
				text: '科目四',
				i: 3,
				position: '87.5%'
			}],
			// subject_list: [{
			// 	text: '科目一',
			// 	i: 0,
			// 	position: '12.5%'
			// }, {
			// 	text: '科目二',
			// 	i: 1,
			// 	position: '37.5%'
			// }, {
			// 	text: '科目三',
			// 	i: 2,
			// 	position: '62.5%'
			// }, {
			// 	text: '科目四',
			// 	i: 3,
			// 	position: '87.5%'
			// }],
			subOpc: ['030302', '030201', '030102', '030101'],
			subject_nav_index: 0,
			menuButtonInfo: {},
			observer: null,
			windowHeight: 0,
			userinfo: {}
		}
	},
	onLoad() {
		const systemInfo = uni.getSystemInfoSync()
		this.windowHeight = systemInfo.windowHeight

	},
	async onShow() {
		this.loading = true // 开始加载
		
		let token = uni.getStorageSync('token')

		// if (!token) {
		// 	return uni.showModal({
		// 		title: '请登录',
		// 		content: '请先登录，登录后才能练习',
		// 		confirmText: '去登录',
		// 		confirmColor: '$uni-color-primary',
		// 		cancelText: '取消',
		// 		cancelColor: '#666',
		// 		success: (e) => {
		// 			if (e.confirm) {
		// 				uni.navigateTo({
		// 					url: '/pages/login/login',
		// 					complete: () => {
		// 					}
		// 				})
		// 			} else {
		// 				uni.switchTab({
		// 					url: '/pages/index/index',
		// 					success: () => {
		// 					}
		// 				})
		// 			}
		// 		}
		// 	})
		// }
		const navIndex = uni.getStorageSync('navIndex')

		this.userinfo = await this.loadUserinfo()
		this.opcData = uni.getStorageSync('opcData') || {}

		if (this.opcData.type == 1) {
			uni.showModal({
				title: '复训提示',
				content: '复训工种，只需要进行理论考试，不需要考实操',
				showCancel: false,
				confirmText: '知道了',
				success: () => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			})
		}
		if (navIndex) {
			this.subject_nav_index = navIndex
			uni.removeStorageSync('navIndex')
		}
		// #ifndef H5
		this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		// #endif

		// 检查用户课程数据
		if (this.opcData?.courseId && Object.keys(this.opcData).length > 0) {
			// 已经选择了课程，直接加载课程详情
			this.$nextTick(() => {
				this.loadCourseDetail()
			})
		} else if (this.userinfo.courses?.length > 0) {
			// 只有一个课程时自动选择
			if (this.userinfo.courses.length === 1) {
				const course = this.userinfo.courses[0];
				this.opcData = {
					courseId: course.id,
					opc: course.opc,
					opcname: course.title,
					type: course.type
				}
				uni.setStorageSync('opcData', this.opcData)
				this.$nextTick(() => {
					this.loadCourseDetail()
				})
			}
			// 有多个课程时等待用户手动选择
			else if (this.userinfo.courses.length > 1) {
				console.log('多工种，等待用户选择');
				// 不自动弹出选择器，让用户通过HeaderSection手动选择
			}
		} else {
			// 没有课程时显示空状态
			console.log('用户暂无课程');
		}

		// this.opcData = uni.getStorageSync('opcData') || {}
		// if (this.opcData.courseId) {
		// 	this.loadCourseDetail()
		// }else{
		// 	this.$refs.indexHead.switchopc()
		// }
		// 初始化时更新高度
		this.$nextTick(async () => {
			await this.updateSwiperHeight()
		})

		// 创建 MutationObserver 监听内容变化
		if (typeof MutationObserver !== 'undefined') {
			this.observer = new MutationObserver(() => {
				this.updateSwiperHeight()
			})

			// 监听当前显示的内容区域
			const currentSubject = document.querySelector(`.subject${this.subject_nav_index + 1}`)
			if (currentSubject) {
				this.observer.observe(currentSubject, {
					childList: true,
					subtree: true,
					attributes: true
				})
			}
		}
		
		// 结束loading状态
		this.loading = false
	},
	methods: {
		// HeaderSection 组件事件处理方法
		showOpcSelector() {
			console.log('显示工种选择器');
			// 显示工种选择器的逻辑
			if (!this.userinfo.courses || this.userinfo.courses.length === 0) {
				uni.showToast({
					title: '暂无可选工种',
					icon: 'none'
				});
				return;
			}
			
			const courseNames = this.userinfo.courses.map(course => course.title);
			uni.showActionSheet({
				itemList: courseNames,
				success: (res) => {
					const selectedCourse = this.userinfo.courses[res.tapIndex];
					this.opcData = {
						courseId: selectedCourse.id,
						opc: selectedCourse.opc,
						opcname: selectedCourse.title,
						type: selectedCourse.type
					};
					uni.setStorageSync('opcData', this.opcData);
					
					// 选择新工种后重新加载课程详情
					if (this.opcData.courseId) {
						this.loadCourseDetail();
					}
					
					// 检查是否为复训工种
					this.opcClick(this.opcData);
				}
			});
		},
		
		goToLogin() {
			console.log('跳转到登录页面');
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},

		async loadUserinfo() {
			try {
				const res = await getDetail();
				if (res && res.data) {
					return res.data; // 返回获取到的用户数据
				} else {
					console.warn('loadUserinfo: No user data received or res.data is missing.');
					return {}; // 如果没有数据或res.data未定义，返回空对象
				}
			} catch (error) {
				console.error('Error in loadUserinfo:', error);
				return {}; // 发生错误时返回空对象
			}
		},
		subjectClick3(val) {
			if (!this.opcData || Object.keys(this.opcData).length === 0) {
				return uni.showToast({
					title: '请先选择工种',
					icon: 'error'
				})
			}
			let type = val == 0 ? 1 : 2
			uni.navigateTo({
				url: `/pages/question/questionList?type=${type}&mode=2&opcname=${this.opcData.opcname}&opc=${this.opcData.opc}`
			})
		},

		opcClick(item) {
			this.opcData = item
			if (item.courseId) {
				this.loadCourseDetail()
			}
			if (this.opcData.type == 1) {
				uni.showModal({
					title: '复训提示',
					content: '复训工种，只需要进行理论考试，不需要考实操',
					showCancel: false,
					confirmText: '知道了',
					success: () => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				})
			}
		},
		loadCourseDetail() {
			this.loading = true
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			getCourseDetail({ courseId: this.opcData.courseId }).then(res => {
				this.data = res.data
				this.loading = false
				uni.hideLoading()
			}).catch(error => {
				console.error('加载课程详情失败:', error);
				this.loading = false
				uni.hideLoading()
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			})
		},
		subjectClick(e, val) {
			this.subject_nav_index = val
		},
		subjectSwiperChange(e) {
			this.subject_nav_index = e.detail.current
		},
		navigateTo(url) {
			if (!this.opcData || Object.keys(this.opcData).length === 0) {
				return uni.showToast({
					title: '请先选择工种',
					icon: 'error'
				})

			}
			uni.navigateTo({
				url: url
			})
		},
		addCourse() {
			uni.navigateTo({ url: '/pages/login/login' })
		},
		updateSwiperHeight() {
			return new Promise((resolve) => {
				const query = uni.createSelectorQuery().in(this)
				const currentIndex = this.subject_nav_index
				const selector = `.subject${currentIndex + 1}`

				const systemInfo = uni.getSystemInfoSync()
				const windowHeight = systemInfo.windowHeight
				const headerHeight = 100 // 头部高度，根据实际调整
				const minHeight = windowHeight - headerHeight

				setTimeout(() => {
					query.select(selector).boundingClientRect(rect => {
						if (rect) {
							const height = Math.max(rect.height, minHeight)
							this.swiperHeight = height
							resolve(height)
						}
					}).exec()
				}, 50) // 短暂延时确保内容渲染
			})
		},
		onReady() {
			setTimeout(() => {
				this.updateSwiperHeight()
			}, 100)
		},
		onScroll(e) {
			// 可以在这里处理滚动事件
		},
		onSimulateWiring(item, index) {

			let data = [
				// {id: 22, name: "K2-1电动机单向连续带点动运转接线",preview: "https://dpsystem.oss-cn-shenzhen.aliyuncs.com/moren1607659060/5b59eb42d04801fc13ae4b69302d5d70",sort: 0,type: 3,uv: 4870},
				{ id: 8, name: "K2-1电动机单向连续带点动运转线路接线", preview: null, type: 3 }, // 中山 K2-1
				// {id: 23, name: "K2-2三相异步电动机正反运转线路接线",preview: "https://dpsystem.oss-cn-shenzhen.aliyuncs.com/moren1607659060/ad2a7efc9c42dc2ae06cadadd16e736d",sort: 1,type: 3,uv: 3483},
				{ id: 9, name: "K2-2三相异步电动机正反转运转线路接线", preview: null, type: 3 }, // 中山 K2-2
				// {id: 10, name: "K2-2 三相异步电动机正反运转线路接线-控制电路", preview: null, type: 3, sort: 2, uv: 3554},
				// {id: 11, name: "K2-2 （深圳） 三相异步电动机正反运转线路接线-主电路", preview: null, type: 3, sort: 3, uv: 2746},
				// {id: 24, name: "K2-3单相电能表带照明灯接线——双控日光灯",preview: "https://dpsystem.oss-cn-shenzhen.aliyuncs.com/moren1607659060/908c99b21e1c0f2ca402937d38a7a1da",sort: 2,type: 3,uv: 2966},
				{ id: 12, name: "K2-3单相电能表带照明灯的安装及接线——双控日光灯", preview: null, type: 3 }, // 中山 K2-3
				// {id: 25, name: "K2-4单相电能表带照明灯接线——单控灯加插座",preview: "https://dpsystem.oss-cn-shenzhen.aliyuncs.com/moren1607659060/3b081d02cb1e903b6034aeaa14572441",sort: 3,type: 3,uv: 2543},
				{ id: 13, name: "K2-4单相电能表带照明灯，插座安装——单控灯加插座", preview: null, type: 3 },  // 中山 K2-4
				// {id: 26, name: "K2-5带熔断器(断路器)、仪表、电流互感器的电动机运行控制电路接线",preview: "https://dpsystem.oss-cn-shenzhen.aliyuncs.com/moren1607659060/d80b759d77a9aa32452f3478b11bf6e4",sort: 4,type: 3,uv: 2743},
				{ id: 14, name: "K2-5带熔断器（断路器）、仪表、电流互感器的电动机运行控制电路接线", preview: null, type: 3 }, // 中山 K2-5
				// {id: 15, name: "K2-5 （深圳） 带熔断器(断路器)、仪表、电流互感器的电动机运行控制电路接线试行", preview: null, type: 3, sort: 7, uv: 2495}
			]
			let id = data.find(itemData => item.title == itemData.name).id
			uni.setStorageSync('subject_item', data)
			// 跳转到模拟接线页面，或弹窗等
			uni.navigateTo({
				url: `/pages/examDydg/index?itemId=${id}`
			})
		},
		onStudyMaterial(index, item) {
			// 跳转到学习资料页面，或弹窗等
			if (!this.opcData || Object.keys(this.opcData).length === 0) {
				return uni.showToast({
					title: '请先选择工种',
					icon: 'error'
				})
			}
			uni.setStorageSync('subject_nav_index', index)
			uni.setStorageSync('subject_item', item)
			uni.navigateTo({
				url: `/pages/practicalTest/subjectDetail?type=1&mode=2&opcname=${this.opcData.opcname}&opc=${this.opcData.opc}`
			})
		}
	},
	beforeDestroy() {
		// 清理 observer
		if (this.observer) {
			this.observer.disconnect()
			this.observer = null
		}
	},
	watch: {
		subject_nav_index: {
			handler(newVal) {
				// 切换时更新监听的元素
				if (this.observer) {
					this.observer.disconnect()
					const currentSubject = document.querySelector(`.subject${newVal + 1}`)
					if (currentSubject) {
						this.observer.observe(currentSubject, {
							childList: true,
							subtree: true,
							attributes: true
						})
					}
				}
			}
		}
	},
	onShareAppMessage() {
		return {
			title: '考前练一练，考试轻松过',
			path: '/pages/index/index'
		}
	},
	onShareTimeline() {
		return {
			title: '考前练一练，考试轻松过',
			path: '/pages/index/index',
			imageUrl: 'https://img.qiananquang.com/app/images/2025-01-11/a5d68acc-f495-4f6a-8410-5bb1ffc8426c.png'
		}
	}
}
</script>

<style lang="scss">
.test {
	min-height: 100vh;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.page-wrapper {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.index-box1 {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	.nav-actual {
		display: flex;
		justify-content: space-evenly;
		position: relative;
		padding: 15rpx 0 20rpx;
		flex-shrink: 0;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10rpx);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		margin-bottom: 15rpx;

		.nav-actual-list {
			width: 20%;
			text-align: center;
			font-weight: 600;
			font-size: 30rpx;
			color: #7C7166;
			position: relative;
			padding: 10rpx 0;
			transition: all 0.3s ease;
			border-radius: 12rpx;
			margin: 0 8rpx;

			&:hover {
				background: rgba(251, 71, 54, 0.1);
				color: #FB4736;
			}

			text {
				position: relative;
				z-index: 2;
			}
		}

		.arrow {
			color: #FB4736;
			position: absolute;
			bottom: 0;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			font-size: 24rpx;
			transform: translateY(50%);
		}
	}

	.swiper-box {
		flex: 1;
		height: 0;

		.swiper-item {
			height: 100%;
			overflow: hidden;
		}

		.subject-scroll {
			height: 100%;
			width: 100%;
			box-sizing: border-box;
		}
	}
}

.nav-list {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 30rpx;

	.list-box {
		width: 25%;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.list-box-link {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.list-icon {
			width: 86rpx;
			height: 86rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 10rpx;
		}

		text {
			font-size: 24rpx;
			font-weight: 600;
			color: #333333;
		}
	}
}

.subject-list {
	display: flex;
	flex-direction: column;
	padding: 16rpx;
	gap: 16rpx;
}

.subject-list-item {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16rpx;
	box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin-bottom: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 18rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10rpx);
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4rpx;
		background: linear-gradient(90deg, #FB4736, #FF6B6B);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

			&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.12);
			border-color: rgba(251, 71, 54, 0.2);

			&::before {
				opacity: 1;
			}
		}

	&:active {
		transform: translateY(-2rpx);
	}
}

.subject-list-img {
	width: 160rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #f7f8fa 0%, #e8eaed 100%);
	border-radius: 12rpx;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
	box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.1);

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
		transform: translateX(-100%);
		transition: transform 0.6s ease;
	}

	&:hover::after {
		transform: translateX(100%);
	}
}

.subject-list-img image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.subject-list-item:hover .subject-list-img image {
	transform: scale(1.05);
}

.subject-list-content {
	flex: 1;
	margin-left: 18rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 120rpx;
	position: relative;
	padding-bottom: 60rpx;
}

.subject-title {
	font-size: 28rpx;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 12rpx;
	line-height: 1.4;
	letter-spacing: 0.5rpx;
}

.subject-list-actions-img {
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: flex-end;
	gap: 12rpx;
	padding: 0;
	width: auto;
}

.subject-list-actions-img .action-btn {
	min-width: 120rpx;
	height: 56rpx;
	line-height: 56rpx;
	padding: 0 20rpx;
	font-size: 24rpx;
	border-radius: 10rpx;
	font-weight: 600;
	transition: all 0.3s ease;
	border: none;
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s ease;
	}

	&:hover::before {
		left: 100%;
	}

	&.primary {
		background: linear-gradient(135deg, #FB4736 0%, #FF6B6B 100%);
		color: #fff;
		box-shadow: 0 4rpx 16rpx rgba(251, 71, 54, 0.3);

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 24rpx rgba(251, 71, 54, 0.4);
		}
	}

	&.default {
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		color: #495057;
		border: 2rpx solid #dee2e6;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

		&:hover {
			background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
			border-color: #adb5bd;
			transform: translateY(-2rpx);
		}
	}
}

.subject3-box {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	padding: 20rpx 16rpx;
	gap: 16rpx;

	.subject3-box-item-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #1a1a1a;
		margin-bottom: 12rpx;
		display: block;
		letter-spacing: 0.5rpx;
	}

	.subject3-box-item-num {
		font-size: 26rpx;
		font-weight: 500;
		color: #6c757d;
		display: block;
		line-height: 1.4;
	}

	.subject3-box-left {
		flex: 1;
		border-radius: 14rpx;
		padding: 24rpx;
		background: linear-gradient(135deg, #e1e9fb 0%, #c7d7f0 100%);
		box-shadow: 0 6rpx 20rpx rgba(72, 94, 161, 0.15);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -50%;
			width: 100%;
			height: 100%;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
			transition: all 0.3s ease;
		}

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 24rpx rgba(72, 94, 161, 0.25);

			&::before {
				transform: scale(1.1);
			}
		}
	}

	.subject3-box-right {
		flex: 1;
		border-radius: 14rpx;
		padding: 24rpx;
		background: linear-gradient(135deg, #fce4dc 0%, #f8d7d0 100%);
		box-shadow: 0 6rpx 20rpx rgba(161, 95, 69, 0.15);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -50%;
			width: 100%;
			height: 100%;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
			transition: all 0.3s ease;
		}

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 24rpx rgba(161, 95, 69, 0.25);

			&::before {
				transform: scale(1.1);
			}
		}
	}

	button {
		color: #fff;
		border-radius: 10rpx;
		margin-top: 18rpx;
		height: 56rpx;
		line-height: 56rpx;
		margin: 0;
		margin-top: 18rpx;
		font-size: 26rpx;
		font-weight: 600;
		border: none;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
			transition: left 0.5s ease;
		}

		&:hover::before {
			left: 100%;
		}

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
		}
	}
}

.sequence {
	.swiper-box {
		width: 100%;

		.swiper-item {
			width: 100%;
		}
	}
}

.my {
	display: flex;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 25rpx;
	margin: 0 30rpx;

	.my-item {
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 142rpx;
		transition: all 0.3s ease;
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10rpx);

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		}

		text {
			display: block;
			text-align: left;
		}

		.title {
			font-weight: 700;
			font-size: 32rpx;
			color: #1a1a1a;
			margin-bottom: 10rpx;
		}

		.num {
			font-weight: 500;
			font-size: 26rpx;
			color: #6c757d;
		}

		.icon-shoucang {
			background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
			box-shadow: 0 6rpx 18rpx rgba(255, 215, 0, 0.4);
		}

		.icon-cuowu2 {
			background: linear-gradient(135deg, #FB4736 0%, #FF6B6B 100%);
			box-shadow: 0 6rpx 18rpx rgba(251, 71, 54, 0.4);
		}

		.iconfont {
			border-radius: 20rpx;
			height: 100rpx;
			width: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 56rpx;
			color: #fff;
			transition: all 0.3s ease;

			&:hover {
				transform: scale(1.1);
			}
		}
	}
}

.swiper-box {
	width: 100%;
	flex: 1;
	transition: height 0.3s;

	.swiper-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
}

.subject1,
.subject2,
.subject3,
.subject4 {
	min-height: 100%;
	padding: 20rpx;
	box-sizing: border-box;
}

/* 确保图片和其他内容正确显示 */
.subject-list-img image,
.nav-list image {
	display: block;
	width: 100%;
	height: 100%;
}

.subject-scroll {
	height: 100%;
	width: 100%;
}

.no-data {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;

	.btn {
		margin-top: 30rpx;
		width: 250rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 12rpx;
		background: linear-gradient(135deg, #FD3523 0%, #FF6B6B 100%);
		border: none;
		color: #fff;
		font-weight: 600;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 16rpx rgba(253, 53, 35, 0.3);

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 24rpx rgba(253, 53, 35, 0.4);
		}
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300rpx;
	width: 100%;
	padding: 40rpx 20rpx;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	margin: 20rpx;
	backdrop-filter: blur(10rpx);

	.empty-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}

/* 考试记录按钮样式 */
.exam-btn {
	background: linear-gradient(135deg, #3073f6, #4a90e2);
	border-radius: 14rpx;
	padding: 24rpx;
	margin: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 6rpx 20rpx rgba(251, 71, 54, 0.2);
	transition: all 0.3s ease;
	border: none;
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
		transition: left 0.6s ease;
	}

	&:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 24rpx rgba(251, 71, 54, 0.3);

		&::before {
			left: 100%;
		}
	}

	.exam-btn-txt {
		.title {
			font-size: 32rpx;
			font-weight: 700;
			color: #fff;
			display: block;
			margin-bottom: 8rpx;
		}

		.look {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
			display: block;
		}
	}

	.exam-btn-btn {
		background: rgba(255, 255, 255, 0.2);
		color: #fff;
		padding: 16rpx 24rpx;
		border-radius: 12rpx;
		font-size: 26rpx;
		font-weight: 600;
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;

		&:hover {
			background: rgba(255, 255, 255, 0.3);
			transform: scale(1.05);
		}
	}
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.subject3-box {
		flex-direction: column;
		gap: 16rpx;
	}

	.subject-list-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 20rpx;

		.subject-list-content {
			margin-left: 0;
			padding-bottom: 0;
		}

		.subject-list-actions-img {
			position: static;
			justify-content: flex-start;
			width: 100%;
		}
	}
}
</style>